<template>
  <view class="page flex-col">
    <view class="box_3 flex-col" v-for="(item, index) in list" :key="index" v-if="list.length > 0" @click="$to('/pages/evaluationDetails/index?id=' + item.article_id)">
      <view class="box_4 flex-row">
        <image style="border-radius: 50px" class="label_1" :src="item.avatar" />
        <text class="text_4">{{ item.nickname }}</text>
        <!--   v-else-->
        <view class="text-wrapper_3" v-if="item.ttp == '卖家'" style="background: #14b8fc; color: #fff">{{ item.ttp }}</view>
        <text class="text-wrapper_3" v-else>{{ item.ttp }}</text>
      </view>

      <view class="text_6">{{ item.content }}</view>
      <view class="text_6"> <uni-rate v-model="item.star" disabled :disabledColor="'#ffca3e'" /></view>

      <view class="text-wrapper_4 flex-row justify-between">
        <text class="text_7">{{ item.create_at }}</text>
      </view>

      <image class="image_2" referrerpolicy="no-referrer" src="/static/myReview/SketchPngcd5b796f9ae542a4abbf7eb071167ae66747efe8f30e2d510bb68d7a2c6b099a.png" />
    </view>

    <view v-if="list.length == 0" class="noneData"></view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      page: 1,
      total: 0
    }
  },
  onLoad() {
    this.getData()
  },
  onReachBottom(e) {
    if (this.list.length < this.total) {
      this.page++
      this.getData(true)
    }
  },
  methods: {
    getData(type) {
      if (!type) {
        this.list = []
      }
      var that = this
      this.$http({
        url: 'getComment'
      }).then(res => {
        this.total = res.data.total
        that.list.push(...res.data.data)
      })
    }
  }
}
</script>
<style lang="css" scoped>
@import '../common/common.css';
.page {
  position: relative;
  width: 100%;
  background-color: #f8f8f8;
  min-height: 99vh;
  padding: 0 2.5%;
  overflow-y: scroll;
}

.box_1 {
  background-color: rgba(255, 255, 255, 1);
  padding: 30rpx 12rpx 26rpx 28rpx;
}

.box_2 {
  margin: 0 18rpx 0 14rpx;
}

.text-wrapper_1 {
  width: 108rpx;
  height: 32rpx;
  overflow-wrap: break-word;
  font-size: 0;
  letter-spacing: -0.2800000011920929px;
  font-family: SFProText-Semibold;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  line-height: 32rpx;
}

.text_1 {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 28rpx;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 32rpx;
}

.text_2 {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 28rpx;
  font-family: SFProText-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 32rpx;
}

.thumbnail_1 {
  width: 34rpx;
  height: 22rpx;
  margin: 6rpx 0 4rpx 438rpx;
}

.thumbnail_2 {
  width: 30rpx;
  height: 22rpx;
  margin: 4rpx 0 6rpx 10rpx;
}

.image_1 {
  width: 48rpx;
  height: 22rpx;
  margin: 4rpx 0 6rpx 10rpx;
}

.text_3 {
  height: 36rpx;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 36rpx;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 54rpx;
}

.box_3 {
  padding: 30rpx 40rpx 12rpx 40rpx;
  background: #fff;
  margin-top: 10px;
}

.box_4 {
  margin-right: 386rpx;
}

.label_1 {
  width: 64rpx;
  height: 64rpx;
}

.text_4 {
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  font-size: 28rpx;
  letter-spacing: -0.4375px;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 40rpx;
  margin: 14rpx 0 0 22rpx;
}

.text-wrapper_3 {
  background-color: rgba(255, 240, 232, 1);
  border-radius: 2px;
  margin: 20rpx 0 16rpx 10rpx;
  padding: 0 6rpx 0 6rpx;
  color: rgba(237, 97, 20, 1);
  font-size: 20rpx;
}

.text_6 {
  color: rgba(51, 51, 51, 1);
  font-size: 26rpx;
  margin: 22rpx 176rpx 0 0;
}

.text-wrapper_4 {
  width: 272rpx;
  margin: 18rpx 398rpx 0 0;
}

.text_7 {
  overflow-wrap: break-word;
  color: rgba(168, 168, 168, 1);
  font-size: 22rpx;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 32rpx;
}

.image_2 {
  width: 670rpx;
  height: 2rpx;
  margin-top: 28rpx;
}

.text_9 {
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  font-size: 28rpx;
  letter-spacing: -0.4375px;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 40rpx;
  margin: 14rpx 0 0 22rpx;
}

.text-wrapper_5 {
  background-color: rgba(231, 250, 253, 1);
  border-radius: 2px;
  margin: 20rpx 0 16rpx 10rpx;
  padding: 0 6rpx 0 6rpx;
}

.text_10 {
  overflow-wrap: break-word;
  color: rgba(20, 184, 252, 1);
  font-size: 20rpx;
  letter-spacing: -0.3125px;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 28rpx;
}

.text_11 {
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 26rpx;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 36rpx;
  margin: 22rpx 250rpx 0 0;
}

.text-wrapper_6 {
  width: 272rpx;
  margin: 18rpx 398rpx 0 0;
}

.text_12 {
  overflow-wrap: break-word;
  color: rgba(168, 168, 168, 1);
  font-size: 22rpx;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 32rpx;
}

.text_13 {
  overflow-wrap: break-word;
  color: rgba(168, 168, 168, 1);
  font-size: 22rpx;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 32rpx;
}

.image_3 {
  width: 670rpx;
  height: 2rpx;
  margin-top: 28rpx;
}

.box_6 {
  margin: 30rpx 440rpx 0 0;
}

.label_3 {
  width: 64rpx;
  height: 64rpx;
}

.text_14 {
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  font-size: 28rpx;
  letter-spacing: -0.4375px;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 40rpx;
  margin: 14rpx 0 0 22rpx;
}

.text-wrapper_7 {
  background-color: rgba(231, 250, 253, 1);
  border-radius: 2px;
  margin: 20rpx 0 16rpx 10rpx;
  padding: 0 6rpx 0 6rpx;
}

.text_15 {
  overflow-wrap: break-word;
  color: rgba(20, 184, 252, 1);
  font-size: 20rpx;
  letter-spacing: -0.3125px;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 28rpx;
}

.text_16 {
  width: 670rpx;
  height: 72rpx;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 26rpx;
  font-weight: NaN;
  text-align: left;
  line-height: 36rpx;
  margin-top: 22rpx;
}

.text-wrapper_8 {
  width: 272rpx;
  margin: 16rpx 398rpx 0 0;
}

.text_17 {
  overflow-wrap: break-word;
  color: rgba(168, 168, 168, 1);
  font-size: 22rpx;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 32rpx;
}

.text_18 {
  overflow-wrap: break-word;
  color: rgba(168, 168, 168, 1);
  font-size: 22rpx;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 32rpx;
}

.image_4 {
  width: 670rpx;
  height: 2rpx;
  margin-top: 30rpx;
}

.box_7 {
  margin: 28rpx 386rpx 0 0;
}

.label_4 {
  width: 64rpx;
  height: 64rpx;
}

.text_19 {
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  font-size: 28rpx;
  letter-spacing: -0.4375px;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 40rpx;
  margin: 14rpx 0 0 22rpx;
}

.text-wrapper_9 {
  background-color: rgba(255, 240, 232, 1);
  border-radius: 2px;
  margin: 20rpx 0 16rpx 10rpx;
  padding: 0 6rpx 0 6rpx;
}

.text_20 {
  overflow-wrap: break-word;
  color: rgba(237, 97, 20, 1);
  font-size: 20rpx;
  letter-spacing: -0.3125px;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 28rpx;
}

.text_21 {
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 26rpx;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 36rpx;
  margin: 22rpx 176rpx 0 0;
}

.text-wrapper_10 {
  width: 272rpx;
  margin: 18rpx 398rpx 0 0;
}

.text_22 {
  overflow-wrap: break-word;
  color: rgba(168, 168, 168, 1);
  font-size: 22rpx;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 32rpx;
}

.text_23 {
  overflow-wrap: break-word;
  color: rgba(168, 168, 168, 1);
  font-size: 22rpx;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 32rpx;
}

.image_5 {
  width: 670rpx;
  height: 2rpx;
  margin-top: 30rpx;
}

.box_8 {
  margin: 28rpx 358rpx 0 0;
}

.label_5 {
  width: 64rpx;
  height: 64rpx;
}

.text_24 {
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  font-size: 28rpx;
  letter-spacing: -0.4375px;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 40rpx;
  margin: 14rpx 0 0 22rpx;
}

.text-wrapper_11 {
  background-color: rgba(231, 250, 253, 1);
  border-radius: 2px;
  margin: 20rpx 0 16rpx 10rpx;
  padding: 0 6rpx 0 6rpx;
}

.text_25 {
  overflow-wrap: break-word;
  color: rgba(20, 184, 252, 1);
  font-size: 20rpx;
  letter-spacing: -0.3125px;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 28rpx;
}

.text_26 {
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 26rpx;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 36rpx;
  margin: 22rpx 250rpx 0 0;
}

.text-wrapper_12 {
  width: 272rpx;
  margin: 18rpx 398rpx 0 0;
}

.text_27 {
  overflow-wrap: break-word;
  color: rgba(168, 168, 168, 1);
  font-size: 22rpx;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 32rpx;
}

.text_28 {
  overflow-wrap: break-word;
  color: rgba(168, 168, 168, 1);
  font-size: 22rpx;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 32rpx;
}
</style>
